<template>
  <div>
       <div class="top">
      <el-button type="primary">录入客户</el-button>
    </div>

    <!-- 表单 -->
    <div class="box">
      <div class="box-left">
          <div class="block">
        客户状态：<el-cascader :props="props"></el-cascader>
        时间：
        <span class="demonstration" id="date"></span>
        <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        </div>
        <div style="margin-top: 15px" class="search">
          <el-input placeholder="请输入客户姓名或身份证" v-model="input2">
            <template slot="append">搜索</template>
          </el-input>
        </div>
      </div>
      

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="申请时间" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="idcard" label="电话" width="200">
        </el-table-column>
        <el-table-column prop="money" label="申请金额(元)" width="200">
        </el-table-column>
        <el-table-column prop="phone" label="贷款类型" width="300">
        </el-table-column>
        <el-table-column prop="money" label="风险信息" width="200">
        </el-table-column>
        <el-table-column prop="money" label="客户来源" width="200">
        </el-table-column>
        <el-table-column prop="money" label="详情" width="200">
        </el-table-column>
        <el-table-column prop="money" label="管理" width="200">
        </el-table-column>
      </el-table>
      <!-- 页数 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="500"
        style="fixed='right'"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
let id = 0;
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },

  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "2000",
          phone: "15296541256",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "2000",
          phone: "15296541256",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "2000",
          phone: "15296541256",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "2000",
          phone: "15296541256",
        },
      ],
      input2:'',
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        },
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 260px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.box {
  float: left;
}
.box-left{
    float: left;
}
// .block {
//   float: left;
// }
.search {
  position: fixed;
  top:133px;
  left: 1200px;
  z-index: 100;
}
.top{
    float: right;
}

</style>